<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./echarts.min.js"></script>
</head>
<body>
   <div id="app" style="width: 800px; height: 500px;"></div>
</body>
<script>
    var myEchart =echarts.init(document.getElementById('app'))
    var option ={
        xAxis: {
            // 坐标轴
            name:"星期/天",
            nameGap:35,
            nameLocation:'middle',
            nameTextStyle:{
                fontWeight:'bold',
                fontSize:20
            },
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat','Sun']
        },
        yAxis: {
            name:"价格/元",
            nameGap:35,
            // nameRotate:90,
            nameLocation:'middle',// 坐标轴名称文字 是否居中
            nameTextStyle:{
                fontWeight:'bold',
                fontSize:20
            },
            // 坐标轴刻度
            axisTick: {
            show:true,
            length: 8,
            inside: true, // 坐标轴刻度是否朝内，默认朝外
            lineStyle:{
                color:'red',
            }
         },
        //  轴线
         axisLine:{
            show:true,// y轴线
            symbol :'arrow',//两端是否有箭头 arrow显示 none不显示
            lineStyle:{
                color:'skyblue',
                width:3,
                type:'dashed',//dashed  dotted
            }
           },
        //    刻度标签
           axisLabel:{
               show:true,
               align:'center',
               formatter:' ￥{value}', //
               margin:30
           }
        },
        series: [
          {
            name: '销量',
            type: 'line',//折线line
            data: [5, 20, 36, 10, 10, 20,50]
          },
          {
            name: '销量',
            type: 'bar',//折线line
            data: [5, 20, 6, 10, 10, 20,30]
          }
        ]
    }
    myEchart.setOption(option)
</script>
</html>